<template>
	<view class="kuang">
		<image class="bj" src="/static/组 6.png" mode=""></image>
		<text class="title">维修任务</text>
	</view>
	<view class="jiantou" @click="goBack"></view>
	<!-- 搜索框 -->
	<view class="sousuo">
		<text class="sousuozi">输入需要搜索的内容</text>
		<image class="sousuobiao" src="/static/搜索.png" mode=""></image>
	</view>
	<view class="a4ge">
		<view class="a4zi">
			共3条
		</view>
		<view class="a4zi">
			状态
			<view class="dropdown-wrapper">
				<view class="status-btn" @click="toggleStatusDropdown">
					<text class="status-text">全部</text>
					<view class="checkmark"></view>
				</view>

				<view class="status-dropdown" v-if="showStatusDropdown">
					<view class="dropdown-item" @click="selectStatus('全部')">
						<text>全部</text>
						<view class="checkmark"></view>
					</view>
					<view class="dropdown-item" @click="selectStatus('待处理')">待处理</view>
					<view class="dropdown-item" @click="selectStatus('进行中')">进行中</view>
					<view class="dropdown-item" @click="selectStatus('已完成')">已完成</view>
				</view>
			</view>
		</view>
		<view class="a4zi">
			维修方式
			<view class="dropdown-wrapper1">
				<view class="status-btn1" @click="toggleStatusDropdown1">
					<text class="status-text1">全部</text>
					<view class="checkmark1"></view>
				</view>

				<view class="status-dropdown1" v-if="showStatusDropdown1">
					<view class="dropdown-item1" @click="selectStatus1('全部')">
						<text>全部</text>
						<view class="checkmark1"></view>
					</view>
					<view class="dropdown-item1" @click="selectStatus('待处理')">待处理</view>
					<view class="dropdown-item1" @click="selectStatus('进行中')">进行中</view>
					<view class="dropdown-item1" @click="selectStatus('已完成')">已完成</view>
				</view>
			</view>
		</view>
		<view class="a4zi">
			<image class="riqi" src="/static/预约挂号@3x.png" mode=""></image>
			日期
		</view>
	</view>
	<view class="weixiu">
		<view class="diyi">
			<view class="danhao">
				维修单号:3535252
			</view>
			<view class="zhuangtai">
				进行中
			</view>
		</view>
		<view class="dier">
			<view class="zuo">
				<view class="zuo1">
					维修方式: 到店维修
				</view>
				<view class="zuo2">
					预约日期: 2023-03-18 11:00
				</view>
			</view>
			<view class="you">
				<button class="chakan" @click="wxdetail">查看详情</button>
			</view>
		</view>
	</view>
	<view class="weixiu">
		<view class="diyi">
			<view class="danhao">
				维修单号:3535252
			</view>
			<view class="zhuangtai">
				已完成
			</view>
		</view>
		<view class="dier">
			<view class="zuo">
				<view class="zuo1">
					维修方式: 上门取车
				</view>
				<view class="zuo2">
					预约日期: 2023-03-18 11:00
				</view>
			</view>
			<view class="you">
				<button class="chakan">查看详情</button>
			</view>
		</view>
	</view>
	<view class="weixiu">
		<view class="diyi">
			<view class="danhao">
				维修单号:3535252
			</view>
			<view class="zhuangtai">
				进行中
			</view>
		</view>
		<view class="dier">
			<view class="zuo">
				<view class="zuo1">
					维修方式: 上门取车
				</view>
				<view class="zuo2">
					预约日期: 2023-03-18 11:00
				</view>
			</view>
			<view class="you">
				<button class="chakan">查看详情</button>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'

	const showStatusDropdown = ref(false)
	const showStatusDropdown1 = ref(false)

	const toggleStatusDropdown = () => {
		showStatusDropdown.value = !showStatusDropdown.value
	}
	const toggleStatusDropdown1 = () => {
		showStatusDropdown1.value = !showStatusDropdown1.value
	}

	const selectStatus = (status) => {
		console.log('选择了状态:', status)
		showStatusDropdown.value = false
	}
	const selectStatus1 = (status) => {
		console.log('选择了状态:', status)
		showStatusDropdown.value = false
	}
	const wxdetail = () => {
		uni.navigateTo({
			url: '/pages/wxDetail/wxDetail'
		})
	}

	function goBack() {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style scoped>
	.bj {
		position: absolute;
		z-index: 1;
		width: 750rpx;
		height: 430rpx;
	}

	.kuang {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 35rpx;
		position: absolute;
		z-index: 2;
		color: white;
		margin-top: 60rpx;
	}

	.jiantou {
		position: absolute;
		z-index: 2;
		width: 30rpx;
		height: 30rpx;
		border: 5rpx solid white;
		border-top: none;
		border-left: none;
		transform: rotate(135deg);
		margin-top: 60rpx;
		margin-left: 30rpx;
	}

	.sousuo {
		margin-top: 140rpx;
		position: absolute;
		z-index: 2;
		width: 660rpx;
		height: 80rpx;
		background-color: #f8f8f8;
		margin-left: 45rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.sousuozi {
		line-height: 80rpx;
		margin-left: 30rpx;
		color: #bfbfbf;
		font-size: 22rpx;
	}

	.sousuobiao {
		width: 30rpx;
		height: 30rpx;
		margin-right: 40rpx;
	}

	.a4ge {
		position: absolute;
		z-index: 3;
		margin-top: 230rpx;
		width: 750rpx;
		display: flex;
		justify-content: space-around;
	}

	.a4zi {
		font-size: 30rpx;
		color: white;
	}

	.riqi {
		width: 30rpx;
		height: 30rpx;
		filter: drop-shadow(5rpx 5rpx 5 white) drop-shadow(-5rpx -5rpx 5 white);
		filter: brightness(0) invert(1);
	}

	/* 状态按钮样式 - 根据图片调整 */
	.status-btn {
		width: 130rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #0359d8;
		color: white;
		border-radius: 40rpx;
		font-size: 26rpx;
		min-width: 120rpx;
		margin-top: 10rpx;
		margin-left: -30rpx;
	}

	.status-text {
		font-size: 25rpx;
		line-height: 60rpx;
	}

	.checkmark {
		width: 15rpx;
		height: 15rpx;
		border: 2rpx solid white;
		border-top: none;
		border-left: none;
		transform: rotate(45deg);
		margin-left: 10rpx;
		margin-top: -10rpx;
	}

	.dropdown-wrapper {
		position: relative;
	}

	.status-dropdown {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		background: white;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		margin-top: 10rpx;
		min-width: 180rpx;
		z-index: 100;
	}

	.dropdown-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		color: #333;
		font-size: 26rpx;
	}

	.dropdown-item:last-child {
		border-bottom: none;
	}

	.dropdown-item:active {
		background-color: #f0f0f0;
	}

	.dropdown-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
	}

	.status-btn1 {
		width: 130rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #0359d8;
		color: white;
		border-radius: 40rpx;
		font-size: 26rpx;
		min-width: 120rpx;
		margin-top: 10rpx;
	}

	.status-text1 {
		font-size: 25rpx;
		line-height: 60rpx;
	}

	.checkmark1 {
		width: 15rpx;
		height: 15rpx;
		border: 2rpx solid white;
		border-top: none;
		border-left: none;
		transform: rotate(45deg);
		margin-left: 10rpx;
		margin-top: -10rpx;
	}

	.dropdown-wrapper1 {
		position: relative;
	}

	.status-dropdown1 {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		background: white;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		margin-top: 10rpx;
		min-width: 180rpx;
		z-index: 100;
	}

	.dropdown-item1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		color: #333;
		font-size: 26rpx;
	}

	.dropdown-item:last-child1 {
		border-bottom: none;
	}

	.dropdown-item:active1 {
		background-color: #f0f0f0;
	}

	.dropdown-mask1 {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
	}

	.weixiu {
		margin-top: 350rpx;
		margin-bottom: -300rpx;
		background-color: white;
		width: 710rpx;
		height: 240rpx;
		margin-left: 20rpx;
		border-radius: 20rpx;
		position: relative;
		z-index: 2;
	}

	.diyi {
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		border-bottom: 5rpx solid #f5f5f5;
	}

	.danhao {
		font-size: 33rpx;
		font-weight: bold;
		margin-left: 30rpx;
		margin-top: 30rpx;

	}

	.zhuangtai {
		color: #4a82ee;
		margin-right: 30rpx;
		margin-top: 30rpx;
	}

	.dier {
		display: flex;
		justify-content: space-between;
	}

	.zuo {
		margin-left: 30rpx;
	}

	.zuo1 {
		margin-top: 20rpx;
	}

	.zuo2 {
		margin-top: 20rpx;
	}

	.chakan {
		width: 180rpx;
		height: 60rpx;
		font-size: 25rpx;
		margin-top: 40rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;
		color: white;
		background-color: #0663e7;
	}
</style>